<template>
  <div class="display-flex ai-center" v-if="food">
    <transition name="move">
      <div class="decrement" v-if="food.count" @click.stop="updateFoodCount(false)">
        <i class="iconfont icon-icon-remove"></i>
      </div>
    </transition>
    <div class="pl-2 pr-2" v-if="food.count">{{food.count}}</div>
    <div class="add" @click.stop="updateFoodCount(true)">
      <i class="iconfont icon-iconaddcircle"></i>
    </div>
  </div>
</template>

<script>
  import {UPDATE_FOOD_COUNT} from '../../store/mutation-types'
  export default {
    name: "CartControl",
    props:{
      food:Object
    },
    methods:{
      updateFoodCount(isAdd){
        this.$store.commit(UPDATE_FOOD_COUNT,{food:this.food,isAdd})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .decrement{
    margin-top: 6px;
    &.move-enter-active,&.move-leave-active{
      transition: all .3s;
    }
    &.move-enter,&.move-leave-to{
      opacity: 0;
      transform: translateX(15px) rotate(180deg);
    }
    .iconfont{
      font-size: 22px;
      color: #02a774;
    }
  }
  .add{
    .iconfont{
      font-size: 26px;
      color: #02a774;
      padding-bottom: -5px;
    }
  }
</style>
